<template>
  <div class="main">
    <div class="editor-wrapper">
      <Editor class="editor" ref="myEditor" @ready="editorReady"></Editor>
    </div>
    <button plain="true" class="submit" @click="saveStatement">提交</button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@/components/editor/editor.vue";
import { mapState } from "vuex";

export default Vue.extend({
  computed: {
    ...mapState("setting", ["statement"]),
  },
  data() {
    return {};
  },
  methods: {
    async saveStatement() {
      //获取富文本编辑器对象
      let myEditor = this.$refs.myEditor as any;
      //上传任务描述
      let html = await myEditor.store();
      this.$store.dispatch("setting/saveSetting", html);
    },
    editorReady() {
      let editor = this.$refs.myEditor as any;
      setTimeout(() => {
        editor.setContent(this.statement);
      }, 1000);
    },
  },
  components: { Editor },
});
</script>
<style lang="scss" scoped>
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  // height: 1000vh;
  .editor-wrapper {
    height: 80vh;
    overflow: scroll;
    .editor {
      height: unset;
    }
  }
  .submit {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    border: 0;
    color: white;
    box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
    background-color: rgb(0, 170, 255);
  }
}
</style>
